import React from 'react';
import { Tag, Form, Input, Button, Card, Spin, Breadcrumb, Icon, Select, Checkbox } from 'antd';
import PropTypes from 'prop-types'
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
const FormItem = Form.Item;
let editor = null;
class UserEdit extends React.Component {
    constructor(props) {
        super(props);

    }


    save = (e) => {
        e.preventDefault();
        var fields = this.props.form.validateFieldsAndScroll;
        fields((errors, values) => {
            if (errors) {
                return;
            }
            this.props.dispatch({ type: 'user/save', payload: values });
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { postloading, detail, schools, checkmodel } = this.props.user;
        return (
            <div>
                <Card style={{ marginBottom: '10px' }}>
                    <Breadcrumb className='edu-breadcrumb' >
                        <Breadcrumb.Item href="">
                            <Icon type="home" />
                        </Breadcrumb.Item>
                        <Breadcrumb.Item href="">
                            用户管理
                        </Breadcrumb.Item>
                        <Breadcrumb.Item href="">
                            编辑
                        </Breadcrumb.Item>
                    </Breadcrumb>
                    <div className='quick-box'>
                        快捷操作：
                        <Button ghost type="primary" icon="rollback" onClick={(e) => { this.props.dispatch(routerRedux.goBack()) }}>返回上一级</Button>
                    </div>
                </Card>
                <Card>
                    <Spin spinning={postloading}>
                        <Form onSubmit={this.save}>
                            <FormItem
                            >
                                {getFieldDecorator('guid', {
                                    initialValue: detail.guid || ''
                                })(
                                    <Input type={'hidden'} placeholder="!" />
                                    )}
                            </FormItem>
                            <FormItem
                                label="选择校区"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 8 }}
                            >
                                {getFieldDecorator('SchoolGuid', {
                                    rules: [{ required: true, message: '请选择部门!' }],
                                    initialValue: detail.schoolGuid || ''
                                })(
                                    <Select >
                                        <Option value=''>请选择部门</Option>
                                        {schools.map(function (item) { return <Option value={item.guid}>{item.name}</Option> })}
                                    </Select>
                                    )}
                            </FormItem>
                            <FormItem
                                label="真实姓名"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 8 }}
                            >
                                {getFieldDecorator('RealName', {
                                    rules: [{ required: true, message: '请输入真实姓名!' }],
                                    initialValue: detail.realName || ''
                                })(
                                    <Input placeholder="请输入真实姓名!" />
                                    )}
                            </FormItem>
                            <FormItem
                                label="登录账号"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 8 }}
                            >
                                {getFieldDecorator('LoginName', {
                                    rules: [{ required: true, message: '请输入登录名称!' }],
                                    initialValue: detail.loginName || ''
                                })(
                                    <Input placeholder="请输入登录名称!" />
                                    )}
                            </FormItem>
                            <FormItem
                                label="登录密码"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 8 }}
                            >
                                {getFieldDecorator('Password', {
                                    rules: [{ required: true, message: '请输入登录密码!' }],
                                    initialValue: detail.password || ''
                                })(
                                    <Input placeholder="请输入登录密码!" />
                                    )}
                            </FormItem>

                            <FormItem
                                label="手机号码"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 8 }}
                            >
                                {getFieldDecorator('Mobile', {
                                    rules: [{ required: true, message: '请输入手机号码!' }],
                                    initialValue: detail.mobile || ''
                                })(
                                    <Input placeholder="请输入手机号码!" />
                                    )}
                            </FormItem>
                            <FormItem
                                label="座机号码"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 8 }}
                            >
                                {getFieldDecorator('Tel', {
                                    rules: [{ message: '请输入座机号码!' }],
                                    initialValue: detail.tel || ''
                                })(
                                    <Input placeholder="请输入座机号码!" />
                                    )}
                            </FormItem>
                            <FormItem
                                label="角色组选择"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 16 }}
                            >
                                {getFieldDecorator('RoleGroup', { initialValue: detail.roleGroup })(
                                    <CheckboxGroup options={checkmodel} />
                                )}
                            </FormItem>
                            <FormItem
                                wrapperCol={{ span: 8, offset: 4, }}>
                                <Button type='primary' htmlType="submit" >提交</Button>
                            </FormItem>
                        </Form>
                    </Spin>
                </Card>
            </div>
        )
    }
}

UserEdit.propTypes = {
    form: PropTypes.object,
    article: PropTypes.object,
    dispatch: PropTypes.func,
    user: PropTypes.object
}

const UserEditForm = Form.create()(UserEdit);

export default connect(({ user }) => ({ user }))(UserEditForm);
